<template>
    <div class="detail">
        <template v-if="isSend">
            <div class="tabs">
                <ul>
                    <li :class="{'active':selected==index}" v-for="(t,index) in tabs" :key="index"
                        @click="change(index)">
                        <i :class="t.icon"></i> {{t.label}}
                    </li>
                </ul>
            </div>
            <iframe :src="url" frameborder="0" style="width: 100%; height: 800px"
                    :style="{ height: dialogHeight }"></iframe>
        </template>
        <template v-else>
            <iframe :src="proUrl.url" frameborder="0" style="width: 100%; height: 800px"
                    :style="{ height: dialogHeight }"></iframe>
        </template>
    </div>
</template>
<script>
    export default {
        name: "RxProceDetail",
        props: {
            proUrl: {
                type: Object,
                default: {},
            },
            isSend: {
                type: Boolean,
                default: false,
            }
        },
        data() {
            return {
                tabs: [{label: '正文', value: '0', icon: 'el-icon-s-help'},
                    {label: '流程', value: '2', icon: 'el-icon-camera'},
                    {label: '流程使用说明书', value: '1', icon: 'el-icon-help'},
                ],
                selected: 0,
                dialogHeight: document.documentElement.clientHeight - 180 + 'px',
                url: this.proUrl.form,
            }
        },
        mounted() {

        },
        watch: {},
        methods: {
            change(index) {
                this.selected = index;
                switch (index) {
                    case 0 :
                        this.url = this.proUrl.form
                        break
                    case 1 :
                        this.url = this.proUrl.workflow
                        break
                    case 2 :
                        this.url = this.proUrl.instruction
                        break
                }
            },
            handleCloseDialog() {
                this.$emit('handle-close-dialog')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .detail {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;


        .tabs {
            background: #FEEFCF;
            width: 100%;
            height: 50px;

            ul {
                width: 300px;
                height: 100%;
                padding-top: 10px;
                display: flex;
                justify-content: space-between;

                li {
                    width: 80px;
                    height: 30px;
                    text-align: center;
                    cursor: pointer;
                    color: black;
                    font-size: 16px;
                }

                .active {
                    color: #108EE9;
                }
            }
        }
    }
</style>
